
<html  lang="zh" xmlns:th="http://www.thymeleaf.org">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>用户登录</title>
    <th:block th:fragment="commen-script">
      <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.min.js"></script>
      <link
              rel="stylesheet"
              href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"
      />
      <script src="https://cdn.jsdelivr.net/npm/axios@0.21.1/dist/axios.min.js"></script>
    </th:block>

    <!-- 360浏览器急速模式 -->
    <meta name="renderer" content="webkit">
    <!-- 避免IE使用兼容模式 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link rel="shortcut icon" href="../static/favicon.ico" th:href="@{favicon.ico}"/>
   <style type="text/css">
     body{
    margin:0;
    padding:0;
}
   </style>

  </head >
  <body th:style="'background:url(' + @{/img/background.jpg} +');'">
    <div style="font-size: xxx-large;text-align: center" class="p-5">物业管理系统 </div>
    <div class="d-flex justify-content-center">
      <div class="w-25 border shadow p-5 center-block">
        <div style="font-size: xx-large">员工登录</div>
        <hr />
        <form>
          <div class="form-group">
            <label for="id">员工ID</label>
            <input type="text" placeholder="请输入员工ID" class="form-control" id="id" required />
            
          </div>

          <div class="form-group">
            <label for="password">密码</label>
            <input
              type="password"
              class="form-control"
              id="password"
              placeholder="请输入密码" 
              required
            />
          </div>

          <div class="form-group" style="display: none;">
            <label for="role">角色</label>
            <select class="form-control" id="role">
              <option value="user">员工</option>
              <option value="admin" class="disabled">管理员</option>
            </select>
          </div>

        </form>
        <button onclick="login()" class="btn btn-primary">登录</button>
        <hr />
        <div
          class="alert alert-warning"
          role="alert"
          id="alert"
          style="display: none"
        >
         请输入正确的用户名和密码
        </div>
        <div>还没有账号？去<a th:href="@{/userregister}">注册</a></div>
        <div class="text-primary"><a th:href="@{/home}">返回门户&raquo;</a></div>
      </div>
    </div>
  </body>
<script>
function login() {
  let alert = document.getElementById("alert");
  alert.style.display = "none";
  let id = document.getElementById("id").value;
  let password = document.getElementById("password").value;
  let role = document.getElementById("role");
  role = role.options[role.selectedIndex].value;
  if (id === "" || password === "") {
    alert.innerHTML = "请输入ID和密码";
    alert.style.display = "block";
    return;
  }
  axios
    .post("userlogin", {
      id: id,
      pwd: password,
      role:role
    })
    .then(function (response) {
      console.log(response);
      let redirect = response.data.redirect;
      if (redirect == "undefined" || redirect == null || redirect == "") {
        alert.innerHTML = response.data.info;
        alert.style.display = "block";
        return;
      }
      window.location = response.data.redirect;
    })
    .catch(function (error) {
      console.log(error);
    });
}


</script>
</html>
